<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #box {
        display: inline-flex;
        background-color: #333;
        width: 100%;
        height: 100%;
    }

    .div {
        width: 100px;
        height: 100px;
        background-color: #999;
        border: 3px solid #666;
        border-radius: 15%;
        font-size: 35px;
        text-align: center;
        line-height: 100px;
    }
</style>

<body>
    <form action="#">
        <select name="flexDirection" id="flexdirection">
            <option value="flex-direction" disabled>flex-direction</option>
            <option value="row">row</option>
            <option value="row-reverse">row-reverse</option>
            <option value="column">column</option>
            <option value="column-reverse">column-reverse</option>
        </select>
        <select name="flexWrap" id="flexwrap">
            <option value="flex-wrap" disabled>flex-wrap</option>
            <option value="nowarp">nowarp</option>
            <option value="wrap">warp</option>
            <option value="warp-reverse">warp-reverse</option>
        </select>
        <select name="justifyContent" id="justifycontent">
            <option value="justify-content" disabled>justify-content</option>
            <option value="flex-start">flex-start</option>
            <option value="flex-end">flex-end</option>
            <option value="center">center</option>
            <option value="space-between">space-between</option>
            <option value="space-around">space-around</option>
            <option value="space-evenly">space-evenly</option>
        </select>
        <select name="alignItems" id="alignitems">
            <option value="align-items" disabled>align-items</option>
            <option value="stretch">stretch</option>
            <option value="flex-start">flex-start</option>
            <option value="flex-end">flex-end</option>
            <option value="center">center</option>
            <option value="baseline">baseline</option>
        </select>
        <select name="alignContent" id="aligncontent">
            <option value="align-content" disabled>align-content</option>
            <option value="flex-start">flex-start</option>
            <option value="flex-end">flex-end</option>
            <option value="center">center</option>
            <option value="space-between">space-between</option>
            <option value="space-around">space-around</option>
            <option value="stretch">stretch</option>
        </select>
        <select name="flexFlow" id="flexflow">
            <option value="flex-flow" disabled>flex-flow</option>
            <option value="row nowrap">row nowrap</option>
            <option value="row-wrap">row wrap</option>
            <option value="row wrap-reverse">row wrap-reverse</option>
            <option value="row-reverse nowrap">row-reverse nowrap</option>
            <option value="row-reverse wrap-reverse">row-reverse wrap-reverse</option>
            <option value="column nowrap">column nowrap</option>
            <option value="column wrap">column wrap</option>
            <option value="column wrap-reverse">column wrap-reverse</option>
            <option value="column-reverse nowrap">column-reverse nowrap</option>
            <option value="column-reverse wrap">column-reverse wrap</option>
            <option value="column-reverse wrap-reverse">column-reverse wrap-reverse</option>
        </select>
        <button id="add">增加成员</button>
        <button id="remove">减少成员</button>
    </form>
    <h1>非内联flex</h1>
    <div id="box">
        <div class="div">1</div>
        <div class="div">2</div>
        <div class="div">3</div>
        <div class="div">4</div>
        <div class="div">5</div>
        <div class="div">6</div>
    </div>
    <script>
        var flexdirection = document.getElementById('flexdirection');
        console.log(flexdirection);
        flexdirection.onchange = function () {
            var select1 = document.getElementById('flexdirection');
            console.log(select1);
            var option1 = select1.options[select1.selectedIndex].value;
            console.log(option1);
            var box1 = document.getElementById('box');
            box1.style.flexDirection = option1;
        }
        var flexwrap = document.getElementById('flexwrap');
        console.log(flexwrap);
        flexwrap.onchange = function () {
            var select2 = document.getElementById('flexwrap');
            console.log(select2);
            var option2 = select2.options[select2.selectedIndex].value;
            console.log(option2);
            var box2 = document.getElementById('box');
            box2.style.flexWrap = option2;
        }
        var justifycontent = document.getElementById('justifycontent');
        console.log(justifycontent);
        justifycontent.onchange = function () {
            var select3 = document.getElementById('justifycontent');
            var option3 = select3.options[select3.selectedIndex].value;
            console.log(option3);
            var box3 = document.getElementById('box');
            box3.style.justifyContent = option3;
        }
        var alignitems = document.getElementById('alignitems');
        alignitems.onchange = function () {
            var select4 = document.getElementById('alignitems');
            var option4 = select4.options[select4.selectedIndex].value;
            var box4 = document.getElementById('box');
            box4.style.alignItems = option4;
        }
        var aligncontent = document.getElementById('aligncontent');
        console.log(aligncontent);
        aligncontent.onchange = function () {
            var select5 = document.getElementById('aligncontent');
            var option5 = select5.options[select5.selectedIndex].value;
            console.log(option5);
            var box5 = document.getElementById('box');
            box5.style.alignContent = option5;
        }
        var flexflow = document.getElementById('flexflow');
        console.log(flexflow);
        flexflow.onchange = function () {
            var select6 = document.getElementById('flexflow');
            var option6 = select6.options[select6.selectedIndex].value;
            var box6 = document.getElementById('box');
            box6.style.flexFlow = option6;
        }
        // var select = document.querySelectorAll('select');
        // console.log(select);
        // Array.from(select).forEach(element => {
        //     console.log(element);
        //     element.onchange = function (event) {
        //         var target = event.target;
        //         console.log(target);
        //         var name = target.name;
        //         console.log(name);
        //         var options = target.options[target.selectedIndex].value;
        //         console.log(options);
        //         var box = document.getElementById('box');
        //         console.log(box);
        //         box.style[name] = options;
        //     }
        // });
        
        var add = document.getElementById('add');
        console.log(add);
        add.onclick = function () {
            var divi = document.getElementById('box');
            console.log(divi);
            var len = divi.childElementCount;
            console.log(len);
            var div = document.createElement('div');
            div.innerHTML = len + 1;
            div.classList.add('div');
            divi.appendChild(div);
        }
        var remove = document.getElementById('remove');
        console.log(remove);
        remove.onclick = function () {
            var divi2 = document.getElementById('box');
            console.log(divi2);
            var len2 = divi2.children;
            console.log(len2);
            len2[len2.length - 1].remove();
        }
    </script>
</body>

</html>